<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft"
                 style="--van-nav-bar-text-color: #FFC000;--van-nav-bar-icon-color:#FFC000"></van-nav-bar>
    <div class="top">
      <h1>安全验证</h1>
      <p style="padding: 5px 0px 5px 0px">修改校园卡信息需要安全验证</p>
      <p>点击验证，企业微信将收到一封验证邮件</p>
    </div>
    <div class="con">
      <div class="fasong">
        <van-button @click="sendVerificationCode" :disabled="disableButton">{{ buttonLabel }}</van-button>
      </div>
      <div class="input">
        <van-field v-model="verificationCode" placeholder="请输入验证码"></van-field>
      </div>
      <div class="ti-button">
        <van-button type="primary" color="#FCC70E" block @click="submitVerificationCode">验证</van-button>
      </div>
    </div>
    <!-- 提示信息 -->
    <div  style="font-size: 14px;padding: 3px" v-if="showToast" :duration="toastDuration" position="bottom">{{ toastText }}</div>
  </div>
</template>

<script>
import myAxios from "@/plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant";
import publicAxios from "@/plugins/publicAxios.ts";

export default {
  data() {
    return {
      disableButton: false,
      buttonLabel: '发送验证码',
      verificationCode: '',
      countdown: 120,
      showToast: false,
      toastText: '',
      toastDuration: 120 * 1000, // Toast 显示时长，单位毫秒
    };
  },
  methods: {
    async sendVerificationCode() {
      // TODO: 实现发送邮箱验证码的代码
      // 你可能需要使用后端服务来完成这个功能
      console.log('正在发送验证码...');
      this.disableButton = true; //禁用按钮

      // 显示包含动态倒计时信息的 Toast 提示
      this.showToast = true;
      this.toastText = `邮箱验证码发送成功,请在[企业微信]-[邮件]查看`;

      // 指定时间后隐藏 Toast
      setTimeout(() => {
        this.showToast = false;
      }, this.toastDuration);
      const response = await publicAxios.get('/mail/safetyCode')
      if (response?.code === 200 && response?.data) {
        showSuccessToast('发送成功');
      }else {
        showFailToast('未绑定学号');
      };
    },
    async submitVerificationCode() {
      const response = await publicAxios.post('/verify/safetyCode',{
        verifyCode: this.verificationCode,
    })
      if (response?.code === 200 && response?.data) {
        this.$router.replace("/update");
      } else {
        console.error();
      }
    },
    onClickLeft() {
      // 返回上一页
      this.$router.back();
    },
  },
};
</script>

<style scoped>
/* 添加你的样式 */
.top {
  padding: 10px;
}
.con {
  text-align: center;
}
.fasong {
  padding: 10px 0px 30px 0px;
}
.input {
  border: 2px solid #FCDEC5; /* 边框宽度、样式和颜色 */
}
.ti-button {
  padding: 20px 0px 10px 0px;
}
</style>
